import {mapGetters, mapState} from 'vuex';
import {get, getAsync} from '@/utils/serviceHelper.js';

export default {
    data() {
        return {
            timer: "",
            riskPosition: [],
            riskPositionTotal: 0,
            riskPositionOpt: [],
            dayMeterData: [],
            positionIds: [],
            positionIdMap: null,
            chartOption: null
        }
    },
    computed: {},
    watch: {},
    mounted() {
        this.positionIdMap = new Map();
        this.initChartOption();
        //执行下面的函数
        this.$store.dispatch('getRiskPositionListOptionsReturn', {page: 0, rows: 100}).then((res) => {
            this.riskPosition = [...res];
            this.riskPositionTotal = res.length;
            this.riskPositionOpt = this.riskPosition.slice(0, 6);
            this.initChartData();
        });

    },
    methods: {
        initChartTimer: function () {
            let _this = this; //声明一个变量指向Vue实例this，保证作用域一致
            this.timer = setInterval(function () {
                _this.$store.dispatch('getRiskMeterList', _this.positionIds).then((res) => {
                    res.forEach(resItem => {
                        if (_this.positionIdMap.get(resItem.positionId)) {
                            let lineData = _this.positionIdMap.get(resItem.positionId);

                            _this.chartOption.title.text = lineData.title;
                            _this.chartOption.series[0].data = lineData.data.yData;
                            _this.chartOption.xAxis.data = lineData.data.xData;

                            _this.chartOption.series[0].data.shift();
                            _this.chartOption.series[0].data.push(resItem.score);
                            _this.chartOption.xAxis.data.shift();
                            _this.chartOption.xAxis.data.push(resItem.iptTime.split(' ')[1]);
                            if (_this.chartOption && typeof _this.chartOption === "object") {
                                lineData.chart.setOption(_this.chartOption);
                            }

                        }
                    });
                });
            }, 5000);
        },
        initChartData: function () {
            //TODO 目前是测试数据
            let dayDate = new Date();
            dayDate.setTime(dayDate.getTime());

            Promise.all([
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[0].id,
                    year: dayDate.getFullYear(),
                    month: dayDate.getMonth() + 1,
                    day: dayDate.getDate()
                }),
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[1].id,
                    year: dayDate.getFullYear(),
                    month: dayDate.getMonth() + 1,
                    day: dayDate.getDate()
                }),
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[2].id,
                    year: dayDate.getFullYear(),
                    month: dayDate.getMonth() + 1,
                    day: dayDate.getDate()
                }),
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[3].id,
                    year: dayDate.getFullYear(),
                    month: dayDate.getMonth() + 1,
                    day: dayDate.getDate()
                }),
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[4].id,
                    year: dayDate.getFullYear(),
                    month: dayDate.getMonth() + 1,
                    day: dayDate.getDate()
                }),
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.riskPositionOpt[5].id,
                    year: dayDate.getFullYear(),
                    month: dayDate.getMonth() + 1,
                    day: dayDate.getDate()
                })
            ]).then(res => {
                for (let riskPositionIndex in this.riskPositionOpt) {
                    //positionId集合,用于心跳查询initChartTimer
                    this.positionIds.push(this.riskPositionOpt[riskPositionIndex].id);

                    //初始化折线图表
                    let chart = this.$echarts.init(document.getElementById(this.riskPositionOpt[riskPositionIndex].id));
                    //map存储折线图表及数据。key：id、value：{title，data，chart}
                    this.positionIdMap.set(this.riskPositionOpt[riskPositionIndex].id, {
                        title: this.riskPositionOpt[riskPositionIndex].riskPosition,
                        data: res[riskPositionIndex],
                        chart: chart
                    });

                    //初始化折线图表配置
                    this.chartOption.title.text = this.riskPositionOpt[riskPositionIndex].riskPosition;
                    this.chartOption.series[0].data = res[riskPositionIndex].yData;
                    this.chartOption.xAxis.data = res[riskPositionIndex].xData;
                    if (this.chartOption && typeof this.chartOption === "object") {
                        chart.setOption(this.chartOption);
                    }
                }
                //启动心跳查询
                this.initChartTimer();

            })


        },
        handleCurrentChange(val) {
            this.riskPositionOpt = this.riskPosition.slice(val - 1, val - 1 + 6);
            this.positionIds = [];
            this.positionIdMap.clear();
            this.initChartData();
        },
        initChartOption: function () {
            this.chartOption = {
                title: {
                    text: '',
                    left: 0,
                    top: 24,
                    textStyle: {
                        color: '#fff',//坐标值得具体的颜色
                        fontSize: 10
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 99,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    },
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 50,
                        end: 100
                    },
                    {
                        show: true,
                        type: 'slider',
                        top: '90%',
                        start: 50,
                        end: 100,
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    }
                ],
                series: [{
                    data: [],
                    type: 'line',
                    smooth: true
                }]
            };
        },
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    }
}
